import React, { Component } from "react";

import "../styles/collect.scss";
import { good_favlist, good_unfav } from "../api/index";

import { NavBar, Button } from "antd-mobile";

class Collect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      collectlist: [],
      userid: localStorage.getItem("userid"),
    };
  }
  async componentDidMount() {
    var res = await good_favlist({ userid: this.state.userid });
    console.log(res.data.list);
    this.setState({
      collectlist: res.data.list,
    });
  }
  goback() {
    this.props.history.go(-1);
  }
  async removes(goodid) {
    var res = await good_unfav({ userid: this.state.userid, goodid });
    console.log(res);
  }
  render() {
    return (
      <div className="collect">
        <div className="title">
          <NavBar
            onBack={() => {
              this.goback();
            }}
            className="title-word"
          >
            我的收藏
          </NavBar>
        </div>
        {this.state.collectlist.map((item, index) => {
          return (
            <div className="box-item" key={index}>
              <img src={item.pic} alt="" />
              <div className="right">
                <div className="reduce">
                  <div className="box-brand">{item.brand}</div>
                  <div className="box-brandEN">{item.brandEN}</div>
                  <div className="box-name">{item.name}</div>
                </div>
                <div className="box-price">
                  原价：<span>￥{item.salesPrice.value}</span>
                </div>
                <div className="priceshou">
                  <div className="box-newprice">
                    活动价：
                    <span className="newmoney">
                      ￥{item.salesPrice.value}
                    </span>
                  </div>
                  <Button
                    color="warning"
                    fill="outline"
                    size="mini"
                    onClick={() => {this.removes(item.id);
                    }}
                  >
                    取消收藏
                  </Button>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    );
  }
}

export default Collect;
